<template>
  <div id='pushSchedule'>
    <div class="card-container">
      <div class="push-header">
        <el-progress type="circle" v-show="num !== 100" :percentage="num"></el-progress>
        <el-result icon="success" v-show="num == 100" title="资料推送完成">
          <template slot="extra">
            <el-button size="medium" @click="close">返回列表</el-button>
          </template>
        </el-result>
      </div>
    </div>
    <div class="card-container">
      <div class="body">
        <div class="body-tag">
          <div class="all">全部 {{ sum }}</div>
          <div class="icon_2">推送失败 {{ lose }}</div>
          <div class="icon_3">推送成功 {{ succeed }}</div>
        </div>
        <div class="body-tabel">
          <el-table v-loading="loading" height="300" :data="dataList">
            <el-table-column label="推送状态" show-overflow-tooltip align="center" prop="upgradeStatus">
              <template slot-scope="scope">
                <span v-if="scope.row.upgradeStatus == '1'" style="color: #67C23A;">成功</span>
                <span v-else style="color: #F56C6C;">失败</span>
              </template>
            </el-table-column>
            <el-table-column label="设备序列号" show-overflow-tooltip align="center" prop="deviceCode" />
            <el-table-column label="站点名称" show-overflow-tooltip align="center" prop="siteName" />
            <el-table-column label="设备类型" show-overflow-tooltip align="center" prop="deviceTypeLabel" />
            <el-table-column label="设备型号" show-overflow-tooltip align="center" prop="model" />
            <el-table-column label="软件版本" show-overflow-tooltip align="center" prop="version" />
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { pushProject } from '@/api/dm/dm';
export default {
  name: 'pushSchedule',
  props: {
    row: {
      type: Object,
      default: () => {
        return {
          row: {},
          toData: [],
        };
      },
    },
  },
  data() {
    return {
      num: 0,
      dataList: [],
      loading: false,
      lose: 0,
      succeed: 0,
    };
  },
  computed: {
    sum() {
      let sum = 0;
      this.row.toData.forEach((item) => {
        // if (item.deviceList) {
        sum += 1;
        // }
      });
      return sum;
    },
  },
  created() {
    // if (process.client){}
  },
  mounted() {
    this.init();
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    init() {
      // const res = await pushProject()
      // this.row.toData.forEach(async (item) => {
      //   if (item.deviceList) {

      this.row.toData.forEach(async (item) => {
        if (item.deviceList) {
          item.deviceList.forEach(async (ele) => {
            const res = await pushProject({
              dataManageId: this.row.row.dataManageId,
              dataPushTotalId: this.row.row.dataId,
              code: ele.label,
              deviceId: ele.id,
            });
            if (res.code == 200) {
              this.num += 100 / this.sum;
              this.dataList.push(res.data);
              if (res.data.upgradeStatus == '1') {
                this.succeed++;
              } else {
                this.lose++;
              }
            }
          });
        }
      });
      // }
      // else {
      //   const res = await pushProject({
      //     dataManageId: row.row.dataManageId,
      //     dataPushTotalId: row.row.dataId,
      //     code: item.label,
      //     deviceId: item.id,
      //   });
      // }
      // });
    },
    close() {
      this.$emit('close');
    },
  },
};
</script>
<style lang='scss' scoped>
#pushSchedule {
  width: 100%;
  height: 100%;
}

.push-header {
  display: flex;
  justify-content: center;
}

.body {
  width: 100%;
  // height: 350px;
  display: flex;
  flex-direction: column;

  // background: red;
  .body-tag {
    display: flex;

    >div {
      // width: 100px;
      position: relative;
      padding: 0 20px;
      color: rgba(144, 147, 153);
    }

    .all {
      color: rgba(0, 0, 0, 0.85);
      border-right: 1px solid rgba(144, 147, 153, 0.2);
    }

    .icon_1::before {
      content: ' ';
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translate(-12px, -50%);
      width: 8px;
      height: 8px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 50%;
    }

    .icon_2::before {
      content: ' ';
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translate(-12px, -50%);
      width: 8px;
      height: 8px;
      background: red;
      border-radius: 50%;
    }

    .icon_3::before {
      content: ' ';
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translate(-12px, -50%);
      width: 8px;
      height: 8px;
      background: rgba(82, 196, 26, 1);
      border-radius: 50%;
    }
  }

  .body-tabel {
    margin-top: 10px;
    padding: 0 10px;
  }
}
</style>